<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <title>问卷管理</title>
</head>
<body>
<div class="container">
    <div class="my-5 bg-primary p-4 text-white d-flex justify-content-center">
        <h1>问卷管理</h1>
    </div>
    <div>
        {% if question_list|length != 0 %}
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>访问码</th>
                    <th>浏览人数</th>
                    <th>提交人数</th>
                </tr>
                </thead>
                <tbody>
                {% for item in question_list %}
                    <tr>
                        <td>{{ item.index }}</td>
                        <td>{{ item.start }}</td>
                        <td>{{ item.finish }}</td>
                        <td>{{ item.visited_code }}</td>
                        <td>{{ item.visited_count }}</td>
                        <td>{{ item.commit_count }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div>
                <label>无问卷记录！</label>
            </div>
        {% endif %}
    </div>
    <div class="mt-3">
        <form action="options/">
            {% if current_status == 'stop' %}
                <div class="mb-3 mt-3">
                    <label class="form-label mt-5">当前状态:结束问卷</label>
                </div>
                <input name="todo" value="start" hidden>
                <button class="btn mt-4 btn-primary" type="submit">开始问卷</button>
            {% else %}
                <div class="mb-3 mt-3">
                    <label class="form-label mt-5">当前状态:正在问卷...</label>
                    <label>开始时间：{{ start_time }}</label>
                    <div class="mt-4 p-5 bg-primary text-white rounded display-2 d-flex justify-content-center">
                        <p>访问码：{{ visit_code }}</p>
                    </div>
                </div>
                <input name="todo" value="finish" hidden>
                <button class="btn mt-4 btn-primary" type="submit">结束问卷</button>
            {% endif %}
        </form>
    </div>
</div>
</body>
</html>